<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
    <div class="lock-screen-wrapper">
        <div class="lock-screen-time"></div>
        <div class="lock-screen-date"></div>
        <div class="lock-screen-form">
            <input placeholder="输入123456解锁" autocomplete="new-password" class="lock-screen-psw" maxlength="20"
                   type="password" name="newpwd" id="newpwd"/>
            <i class="layui-icon layui-icon-right lock-screen-enter"></i>
            <br/>
            <div class="lock-screen-tip"></div>
        </div>
        <div class="lock-screen-tool">
            <div class="lock-screen-tool-item">
                <i class="layui-icon layui-icon-logout" data-confirm="false" id="logoutBtn"></i>
                <div class="lock-screen-tool-tip">退出登录</div>
            </div>
        </div>
    </div>

    <script>
        layui.use(['util', 'admin', 'ax'], function () {
            var $ = layui.jquery;
            var util = layui.util;
            var admin = layui.admin;
            var $ax = layui.ax;
            var rightPsw = 'e10adc3949ba59abbe56e057f20f883e';  // 正确密码的MD5密文

            // 获取各个组件
            var $form = $('.lock-screen-wrapper .lock-screen-form');
            var $psw = $form.find('.lock-screen-psw');
            var $tip = $form.find('.lock-screen-tip');
            var $time = $('.lock-screen-wrapper .lock-screen-time');
            var $date = $('.lock-screen-wrapper .lock-screen-date');

            // 监听退出
            $('#logoutBtn').click(function (e) {
                admin.confirm('确定退出系统？', {icon: 3, title: '提示', zIndex: 99999999999}, function (index) {
                    //do something
                    // 解锁锁屏
                    admin.unlockScreen();
                    window.location.href = Kong.ctxPath + "/logout"
                    layer.close(index);
                });
            });

            // 监听enter键
            $(window).keydown(function (event) {
                if (admin.isLockScreen) {
                    if (event.keyCode === 13) {
                        doVer();
                    } else if (event.keyCode === 8 && !$psw.val()) {
                        restForm();
                        if (event.preventDefault) event.preventDefault();
                        if (event.returnValue) event.returnValue = false;
                    }
                }
            });

            // 监听输入
            $psw.on('input', function () {
                var psw = $psw.val();
                if (rightPsw === toMd5Hex(psw)) {
                    restForm();
                    admin.unlockScreen();
                } else if (psw) {
                    $form.removeClass('show-back');
                    $tip.text('');
                } else {
                    $form.addClass('show-back');
                }
            });

            // 监听按钮点击
            $form.find('.lock-screen-enter').click(function (e) {
                doVer(true);
            });

            // 处理事件
            function doVer(emptyRest) {
                if ($form.hasClass('show-psw')) {
                    $psw.focus();
                    var psw = $psw.val();
                    if (!psw) {
                        emptyRest ? restForm() : $tip.text('请输入解锁密码');
                    } else if (rightPsw === toMd5Hex(psw)) {
                        restForm();
                        admin.unlockScreen();
                    } else {
                        $psw.val('');
                        $tip.text('密码不正确');
                        $form.addClass('show-back');
                    }
                } else {
                    $form.addClass('show-psw show-back');
                    $psw.focus();
                }
            }

            // 重置
            function restForm() {
                $psw.blur();
                $psw.val('');
                $tip.text('');
                $form.removeClass('show-psw show-back');
            }

            // 时间、日期
            function setDate() {
                var date = new Date();
                $time.text(util.toDateString(date, 'HH:mm'));
                var weeks = ['日', '一', '二', '三', '四', '五', '六'];
                $date.text(util.toDateString(date, 'MM月dd日，星期') + weeks[date.getDay()]);
            }

            setDate();

            setInterval(function () {
                if (admin.isLockScreen) setDate();
            }, 1000);

        });
    </script>

    <style>
        .lock-screen-wrapper {
            color: #ffffff;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 50px 60px 0 60px;
            background-color: #000000;
            background-image: url("[(${bg})]");
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
        }

        .lock-screen-time {
            font-size: 88px;
        }

        .lock-screen-date {
            font-size: 24px;
            padding: 0 0 0 13px;
        }

        .lock-screen-form {
            position: absolute;
            left: 0;
            right: 0;
            top: 65%;
            width: 100%;
            text-align: center;
        }

        .lock-screen-psw {
            color: #ffffff;
            font-size: 22px;
            width: 0;
            height: 0;
            line-height: 40px;
            border-radius: 40px;
            border: 2px solid transparent;
            background-color: transparent;
            box-sizing: border-box;
            vertical-align: middle;
            -webkit-transition: all .3s;
            transition: all .3s;
            text-align: center;
        }

        .lock-screen-psw::-webkit-input-placeholder {
            color: #F6F6F6;
            font-size: 16px;
        }

        .lock-screen-psw::-moz-placeholder {
            color: #F6F6F6;
            font-size: 16px;
        }

        .lock-screen-psw::-ms-input-placeholder {
            color: #F6F6F6;
            font-size: 16px;
        }

        .lock-screen-enter {
            width: 65px;
            height: 65px;
            line-height: 1;
            font-size: 28px;
            padding-top: 18px;
            border: 2px solid #ffffff;
            border-radius: 50%;
            text-align: center;
            display: inline-block;
            box-sizing: border-box;
            vertical-align: middle;
            transition: all .3s;
            cursor: pointer;
        }

        .lock-screen-enter:hover {
            background-color: rgba(255, 255, 255, .3);
        }

        .lock-screen-form.show-psw .lock-screen-psw {
            height: 40px;
            width: 180px;
            padding: 0 5px;
            margin-right: 10px;
            border-color: #ffffff;
            background-color: rgba(255, 255, 255, .3);
        }

        .lock-screen-form.show-psw .lock-screen-enter {
            width: 40px;
            height: 40px;
            font-size: 20px;
            padding-top: 8px;
        }

        .lock-screen-form.show-back .lock-screen-enter:before {
            content: "\e603";
        }

        .lock-screen-tip {
            color: red;
            width: 230px;
            padding: 0 3px;
            font-size: 14px;
            text-align: left;
            box-sizing: border-box;
            display: none;
        }

        .lock-screen-form.show-psw .lock-screen-tip {
            display: inline-block;
        }

        .lock-screen-tool {
            width: 20px;
            position: absolute;
            right: 20px;
            bottom: 20px;
        }

        .lock-screen-tool .lock-screen-tool-item {
            position: relative;
            width: 20px;
            height: 20px;
            line-height: 20px;
            margin-top: 15px;
            cursor: pointer;
        }

        .lock-screen-tool .lock-screen-tool-item:hover .layui-icon {
            color: #ffffff;
        }

        .lock-screen-tool .layui-icon {
            font-size: 20px;
        }

        .lock-screen-tool .lock-screen-tool-item .lock-screen-tool-tip {
            position: absolute;
            top: 50%;
            right: 100%;
            height: 24px;
            line-height: 24px;
            width: 60px;
            width: max-content;
            text-align: center;
            margin-right: 10px;
            margin-top: -12px;
            font-size: 12px;
            padding: 0 8px;
            color: #eee;
            border-radius: 3px;
            background-color: rgba(255, 255, 255, .3);
            word-break: break-all;
            display: none;
        }

        .lock-screen-tool .lock-screen-tool-item:hover .lock-screen-tool-tip {
            display: inline-block;
        }

        .lock-screen-tool .lock-screen-tool-item .lock-screen-tool-tip:before {
            content: "";
            border: 4px solid transparent;
            border-left-color: rgba(255, 255, 255, .3);
            position: absolute;
            right: -8px;
            top: 50%;
            margin-top: -4px;
        }
    </style>

    <script>
        /** MD5加密 */
        function toMd5Hex(text) {
            var hexcase = 0;
            var chrsz = 8;

            function core_md5(x, len) {
                x[len >> 5] |= 0x80 << ((len) % 32);
                x[(((len + 64) >>> 9) << 4) + 14] = len;
                var a = 1732584193;
                var b = -271733879;
                var c = -1732584194;
                var d = 271733878;
                for (var i = 0; i < x.length; i += 16) {
                    var olda = a;
                    var oldb = b;
                    var oldc = c;
                    var oldd = d;
                    a = md5_ff(a, b, c, d, x[i + 0], 7, -680876936);
                    d = md5_ff(d, a, b, c, x[i + 1], 12, -389564586);
                    c = md5_ff(c, d, a, b, x[i + 2], 17, 606105819);
                    b = md5_ff(b, c, d, a, x[i + 3], 22, -1044525330);
                    a = md5_ff(a, b, c, d, x[i + 4], 7, -176418897);
                    d = md5_ff(d, a, b, c, x[i + 5], 12, 1200080426);
                    c = md5_ff(c, d, a, b, x[i + 6], 17, -1473231341);
                    b = md5_ff(b, c, d, a, x[i + 7], 22, -45705983);
                    a = md5_ff(a, b, c, d, x[i + 8], 7, 1770035416);
                    d = md5_ff(d, a, b, c, x[i + 9], 12, -1958414417);
                    c = md5_ff(c, d, a, b, x[i + 10], 17, -42063);
                    b = md5_ff(b, c, d, a, x[i + 11], 22, -1990404162);
                    a = md5_ff(a, b, c, d, x[i + 12], 7, 1804603682);
                    d = md5_ff(d, a, b, c, x[i + 13], 12, -40341101);
                    c = md5_ff(c, d, a, b, x[i + 14], 17, -1502002290);
                    b = md5_ff(b, c, d, a, x[i + 15], 22, 1236535329);
                    a = md5_gg(a, b, c, d, x[i + 1], 5, -165796510);
                    d = md5_gg(d, a, b, c, x[i + 6], 9, -1069501632);
                    c = md5_gg(c, d, a, b, x[i + 11], 14, 643717713);
                    b = md5_gg(b, c, d, a, x[i + 0], 20, -373897302);
                    a = md5_gg(a, b, c, d, x[i + 5], 5, -701558691);
                    d = md5_gg(d, a, b, c, x[i + 10], 9, 38016083);
                    c = md5_gg(c, d, a, b, x[i + 15], 14, -660478335);
                    b = md5_gg(b, c, d, a, x[i + 4], 20, -405537848);
                    a = md5_gg(a, b, c, d, x[i + 9], 5, 568446438);
                    d = md5_gg(d, a, b, c, x[i + 14], 9, -1019803690);
                    c = md5_gg(c, d, a, b, x[i + 3], 14, -187363961);
                    b = md5_gg(b, c, d, a, x[i + 8], 20, 1163531501);
                    a = md5_gg(a, b, c, d, x[i + 13], 5, -1444681467);
                    d = md5_gg(d, a, b, c, x[i + 2], 9, -51403784);
                    c = md5_gg(c, d, a, b, x[i + 7], 14, 1735328473);
                    b = md5_gg(b, c, d, a, x[i + 12], 20, -1926607734);
                    a = md5_hh(a, b, c, d, x[i + 5], 4, -378558);
                    d = md5_hh(d, a, b, c, x[i + 8], 11, -2022574463);
                    c = md5_hh(c, d, a, b, x[i + 11], 16, 1839030562);
                    b = md5_hh(b, c, d, a, x[i + 14], 23, -35309556);
                    a = md5_hh(a, b, c, d, x[i + 1], 4, -1530992060);
                    d = md5_hh(d, a, b, c, x[i + 4], 11, 1272893353);
                    c = md5_hh(c, d, a, b, x[i + 7], 16, -155497632);
                    b = md5_hh(b, c, d, a, x[i + 10], 23, -1094730640);
                    a = md5_hh(a, b, c, d, x[i + 13], 4, 681279174);
                    d = md5_hh(d, a, b, c, x[i + 0], 11, -358537222);
                    c = md5_hh(c, d, a, b, x[i + 3], 16, -722521979);
                    b = md5_hh(b, c, d, a, x[i + 6], 23, 76029189);
                    a = md5_hh(a, b, c, d, x[i + 9], 4, -640364487);
                    d = md5_hh(d, a, b, c, x[i + 12], 11, -421815835);
                    c = md5_hh(c, d, a, b, x[i + 15], 16, 530742520);
                    b = md5_hh(b, c, d, a, x[i + 2], 23, -995338651);
                    a = md5_ii(a, b, c, d, x[i + 0], 6, -198630844);
                    d = md5_ii(d, a, b, c, x[i + 7], 10, 1126891415);
                    c = md5_ii(c, d, a, b, x[i + 14], 15, -1416354905);
                    b = md5_ii(b, c, d, a, x[i + 5], 21, -57434055);
                    a = md5_ii(a, b, c, d, x[i + 12], 6, 1700485571);
                    d = md5_ii(d, a, b, c, x[i + 3], 10, -1894986606);
                    c = md5_ii(c, d, a, b, x[i + 10], 15, -1051523);
                    b = md5_ii(b, c, d, a, x[i + 1], 21, -2054922799);
                    a = md5_ii(a, b, c, d, x[i + 8], 6, 1873313359);
                    d = md5_ii(d, a, b, c, x[i + 15], 10, -30611744);
                    c = md5_ii(c, d, a, b, x[i + 6], 15, -1560198380);
                    b = md5_ii(b, c, d, a, x[i + 13], 21, 1309151649);
                    a = md5_ii(a, b, c, d, x[i + 4], 6, -145523070);
                    d = md5_ii(d, a, b, c, x[i + 11], 10, -1120210379);
                    c = md5_ii(c, d, a, b, x[i + 2], 15, 718787259);
                    b = md5_ii(b, c, d, a, x[i + 9], 21, -343485551);
                    a = safe_add(a, olda);
                    b = safe_add(b, oldb);
                    c = safe_add(c, oldc);
                    d = safe_add(d, oldd);
                }
                return Array(a, b, c, d);
            }

            function md5_cmn(q, a, b, x, s, t) {
                return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s), b);
            }

            function md5_ff(a, b, c, d, x, s, t) {
                return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);
            }

            function md5_gg(a, b, c, d, x, s, t) {
                return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);
            }

            function md5_hh(a, b, c, d, x, s, t) {
                return md5_cmn(b ^ c ^ d, a, b, x, s, t);
            }

            function md5_ii(a, b, c, d, x, s, t) {
                return md5_cmn(c ^ (b | (~d)), a, b, x, s, t);
            }

            function safe_add(x, y) {
                var lsw = (x & 0xFFFF) + (y & 0xFFFF);
                var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
                return (msw << 16) | (lsw & 0xFFFF);
            }

            function bit_rol(num, cnt) {
                return (num << cnt) | (num >>> (32 - cnt));
            }

            function str2binl(str) {
                var bin = Array();
                var mask = (1 << chrsz) - 1;
                for (var i = 0; i < str.length * chrsz; i += chrsz)
                    bin[i >> 5] |= (str.charCodeAt(i / chrsz) & mask) << (i % 32);
                return bin;
            }

            function binl2hex(binarray) {
                var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
                var str = "";
                for (var i = 0; i < binarray.length * 4; i++) {
                    str += hex_tab.charAt((binarray[i >> 2] >> ((i % 4) * 8 + 4)) & 0xF) +
                        hex_tab.charAt((binarray[i >> 2] >> ((i % 4) * 8)) & 0xF);
                }
                return str;
            }

            return binl2hex(core_md5(str2binl(text), text.length * chrsz));
        }
    </script>
</html>